<template>
  <el-dialog title="生成海报" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" append-to-body :close-on-press-escape="false" width="800px">
    <div class="content-big">
      <div class="content-left">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <el-form-item label="海报背景：" prop="img">
            <ImageUpload :limit='1' v-model="form.type" type='small' :isShowTip='false'/>
            <div class="imgTips">
              <p>1.图片大小不超过2M；</p>
              <p>2.底图中[群活码]的位置需要空出；</p>
              <p>3.可自行拖拉设置[群活码]的位置和大小。</p>
            </div>
          </el-form-item>


        </el-form>
      </div>
      <div class="content-right">
        <vue-drag-resize
          :isActive="true"
          :w="80"
          :h="80"

          :parentLimitation="true"
          :aspectRatio="true"
          @resizing="resize"
          @dragging="resize"
        >
          <div class="code">二维码</div>
        </vue-drag-resize>

      </div>
    </div>
    <div class="footer-btn" slot="footer">
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'
Vue.component('vue-drag-resize', VueDragResize)

export default {
  name: 'addBatchUser',
  components: {},
  data() {
    return {
      form: {
        img: null,//海报二维码
      },
      dragging: false,
      x: 0,
      y: 0,
      styleObject: {
        position: 'absolute',
        top: '0',
        left: '0'
      },
      xWidth: 100,
      yHeight: 100,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      rules: {
        'basicInfo.taskName': [
          {required: true, message: '请输入任务名称', trigger: 'blur'}
        ],
      },
    }
  },
  created() {

  },
  mounted() {
  },
  watch: {},
  methods: {
    // 拖拽时可以确定元素位置
    resize(newRect) {
      this.width = newRect.width;
      this.height = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  position: relative;


}


.content-big {
  display: flex;

  .content-left {
    flex: 1;
    margin-right: 10px;

  }

  .content-right {
    width: 280px;
    height: 450px;
    position: relative;
    background-color: #f0f0f0;
  }
}

.imgTips {
  min-height: 24px;
  padding-top: 0;
  color: rgba(0, 0, 0, .45);
  font-size: 14px;
  line-height: 1.5715;
  margin-top: 20px;

  p {
    padding: 0px;
    margin: 0px;
  }
}
::v-deep .vdr {
  background: #fff;
  align-items: center;
  justify-content: center;
  .code {
    font-size: 12px;
    color: #888;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
